import React, { Component } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import { Modal, Form, Input, Radio, Select, DatePicker } from 'antd';
const RadioGroup = Radio.Group;
const FormItem = Form.Item;

class UserEditModal extends Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    this.props.dispatch({ type: 'users/fetchOptions' });
  }
  hideModelHandler = () => {
    this.props.dispatch({
      type: 'users/hideModal'
    });
  };

  okHandler = () => {
    const { onOk,record } = this.props;
    this.props.form.validateFields((err, values) => {
      if (record.ID){
        values.ID=record.ID
      }
      if (!err) {
        onOk(values);
        this.hideModelHandler();
        this.props.form.resetFields();
      }
    });
  };

  render() {
    const { showModal, optionDatas,record } = this.props;
    const Option = Select.Option
    const { getFieldDecorator } = this.props.form;
    const { No, Name, Sex, Birthday, OrganizationID, PositionID, SerialID, EMail, Telephone } = record;
    const dateFormat = 'YYYY/MM/DD';
    let { organizations, positions, serials } = optionDatas
    organizations = !organizations ? [] : organizations;
    positions = !positions ? [] : positions;
    serials = !serials ? [] : serials;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };
    return (
      <span>
        <Modal
          title="用户编辑"
          visible={showModal}
          onOk={this.okHandler}
          onCancel={this.hideModelHandler}
          >
          <Form horizontal onSubmit={this.okHandler}>
            <FormItem
              {...formItemLayout}
              label="员工编号"
              >
              {
                getFieldDecorator('No', {
                  initialValue: No,
                })(<Input />)
              }
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="员工名称"
              >
              {
                getFieldDecorator('Name', {
                  initialValue: Name,
                })(<Input />)
              }
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="性别"
              >
              {
                getFieldDecorator('Sex', {
                  initialValue: Sex,
                })(<RadioGroup>
                  <Radio value='1'>男</Radio>
                  <Radio value='2'>女</Radio>
                </RadioGroup>)
              }
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="生日"
              >
              {
                getFieldDecorator('Birthday', {
                  initialValue: Birthday?moment(Birthday, dateFormat):null,
                })(<DatePicker />)
              }
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="所属部门"
              >
              {
                getFieldDecorator('OrganizationID', {
                  initialValue: OrganizationID?''+OrganizationID:'',
                })(<Select>{organizations.map(o => <Option value={"" + o.ID} key={o.ID}>{o.Name}</Option>)}</Select>)
              }
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="职位"
              >
              {
                getFieldDecorator('PositionID', {
                  initialValue: PositionID?''+PositionID:'',
                })(<Select>{positions.map(p => <Option value={"" + p.ID} key={p.ID}>{p.Name}</Option>)}</Select>)
              }
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="序列"
              >
              {
                getFieldDecorator('SerialID', {
                  initialValue: SerialID?''+SerialID:'',
                })(<Select>{serials.map(s => <Option value={"" + s.ID} key={s.ID}>{s.Name}</Option>)}</Select>)
              }
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="邮箱"
              >
              {
                getFieldDecorator('EMail', {
                  initialValue: EMail,
                })(<Input />)
              }
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="电话"
              >
              {
                getFieldDecorator('Telephone', {
                  initialValue: Telephone,
                })(<Input />)
              }
            </FormItem>
          </Form>
        </Modal>
      </span>
    );
  }
}
function mapStateToProps(state) {
  const {optionDatas,showModal,record} = state.users;
  return {
    loading: state.loading.models.users,
    optionDatas,
    showModal,
    record
  }
}
export default Form.create()(connect(mapStateToProps)(UserEditModal));
